import React from "react";
import { Link, useParams, useNavigate, Form } from "react-router-dom"
import { getAllFood } from '../../api/home'
import './allnew.css'
import { InfiniteScroll, List } from 'antd-mobile'

function Allnew() {
    let navigate = useNavigate();//链接跳转
    let parmas = useParams()
    let [alldata, SetAlldata] = React.useState(null)
    let [Num, editNum] = React.useState(20)
    let [flag, Editflag] = React.useState(false)
    let [page, setPage] = React.useState(null)
    let [pages, setPages] = React.useState(1)

    React.useEffect(() => {
        getAllFood(pages,parmas.id).then(data => {
            console.log(data);
            SetAlldata(data.data.data)
            setPage(data.data.total)
        })
    }, [])
    return (
        <div className="allnew">
            <div className="top">
                <div className="left">
                    <i onClick={() => navigate(-1)} className="iconfont icon-zuobian"></i>
                </div>
                <div>所有菜谱</div>
                <div className="right">
                </div>
            </div>
            {/* 相关菜谱 */}
            <div className="likeBox">
                <div className="goods-page">
                    <div className="box">
                        <ul>
                            {
                                alldata && alldata.map((item,index) => {
                                    return (
                                        <Link to={"/detailsvideo/" + item.dishes_id} key={index}>
                                            <li>
                                                <div className="img">
                                                    <img src={item.image} />
                                                    <i className="icon"></i>
                                                </div>
                                                <div className="text">

                                                    <h6>{item.dishes_name}</h6>
                                                    <span>{item.dishes_desc}</span>
                                                    <div className="label-bar">
                                                        {
                                                            item.tags_info && item.tags_info.map(item => {
                                                                return (
                                                                    <div className="div" key={item.id}>
                                                                        <span>{item.text}</span>
                                                                    </div>
                                                                )
                                                            })
                                                        }

                                                    </div>
                                                </div>

                                            </li>
                                        </Link>

                                    )
                                })
                            }

                        </ul>
                        <InfiniteScroll loadMore={async () => {
                            setTimeout(() => {
                                Editflag(true)

                            }, 2000)
                            // console.log(flag);
                            Num += 10
                            pages +=1
                            setPages(pages)
                            editNum(Num)
                            // console.log(Num);
                            await getAllFood(pages,parmas.id).then(data => {
                                for(var i = 0;i < data.data.data.length;i++){
                                    alldata.push(data.data.data[i])
                                }
                                SetAlldata(alldata)
                            })
                            setTimeout(() => {
                                Editflag(false)

                            }, 2000)


                        }} hasMore={flag == false && Num < page}
                            threshold={10}
                        />
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Allnew;
